<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">￥{{ orderInfo.actualprice }}</text>
		</view>

		<view class="pay-type-list">
			
			<view class="type-item b-b" @click="changePayType(2)" v-if="payInfo.type2 == 1">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额支付</text>
					<text>可用余额:{{ userInfo.money }}</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 2"/></label>
			</view>
			
			<view class="type-item b-b" @click="changePayType(10)" v-if="payInfo.type10 == 1">
				<text class="icon yticon icon-daifukuan"></text>
				<view class="con">
					<text class="tit">银行卡支付</text>
					<text>银行卡支付</text>
				</view>
				<label class="radio"><radio value="" color="#4d1dbb" :checked="payType == 10"/></label>
			</view>
			
			<view class="type-item b-b" @click="changePayType(11)" v-if="payInfo.type11 == 1 ">
				<text class="icon yticon icon-alipay"></text>
				<view class="con">
					<text class="tit">支付宝支付</text>
					<text>支付宝支付</text>
				</view>
				<label class="radio"><radio value="" color="#4d1dbb" :checked="payType == 11"/></label>
			</view>
			
			<view class="type-item b-b" @click="changePayType(12)" v-if="payInfo.type12 == 1">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>微信支付</text>
				</view>
				<label class="radio"><radio value="" color="#4d1dbb" :checked="payType == 12"/></label>
			</view>
			
		</view>
		
		<text class="pay-text" @click="navTo('/pages/order/payText')">查看服务协议</text>
		
		<text class="mix-btn" @click="confirm" v-show="submitshow">确认支付</text>
		
		<text class="mix-btn1" @click="confirm1" v-show="submitshow1">生成支付二维码</text>
		
		<view class="cu-modal bottom-modal" :class="payshow">
			<view class="cu-dialog qrcodecontent">
				<view class="qrcodetext">{{paytext}}</view>
				
				<view class="qrcode2">
					<tki-qrcode ref="qrcode2" :val='val' :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
				</view>
				
				<view class="qrcodeclose" @tap="payclose">关闭支付</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
import uniCopy from '@/components/uni-copy.js';
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

export default {
	components: {
		uniCopy
	},
	data() {
		return {
			timer: null,
			
			ismicromessenger: 0,
			isalipay: 0,
			userAgent: '',
			
			payType: 0,
			orderid: 0,
			orderno: '',
			openid: '',
			
			orderInfo: {
				actualprice: 0,
			},
			userInfo: {
				money: 0,
				cash: 0,
			},
			payInfo: {} ,
			submitshow: false,
			submitshow1: false,
			
			
			payshow: '', //值为show  显示
			paytext:'请扫码支付',
			
			val: '', //要生成二维码的值
			size: 300, // 二维码大小
			unit: 'upx', // 单位
			background: '#ffac30', // 背景色
			foreground: '#4d1dbb', // 前景色
			pdground: '#f56c6c', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: true, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', //生成后的图片 base64
			showLoading: true, //loading
			loadingText: 'loading内容', //loading内容
		};
	},
	onUnload() {
		clearInterval(this.timer);
		this.timer = null;
	},
	onHide() {
		if (this.orderInfo.paystatus == 1) {
			clearInterval(this.timer);
			this.timer = null;
			uni.reLaunch({
				url: '/pages/order/paySuccess'
			});
		}
	},
	computed: {},
	onLoad(option) {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo({
				url: '/pages/public/login'
			});
			return;
		}

		//接收传值
		console.log('option', option);
		let orderid = option.orderid;
		if (orderid && orderid != undefined) {
			//获取用户信息
			this.getUserinfo();
			//获取支付信息
			this.getpayinfo();
			//获取订单信息
			this.orderid = orderid;
			//获取订单信息
			this.getOrderInfo();
		}
		
		// #ifdef H5
		var ua = window.navigator.userAgent.toLowerCase();
		console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			this.ismicromessenger = 1;
		}
		if (ua.match(/AlipayClient/i) == 'alipayclient') {
			this.isalipay = 1;
		}
		// #endif

		
		//获取当前访问的设备------------------------------------------------------------
		// #ifdef H5
		var ua = window.navigator.userAgent.toLowerCase();
		console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			this.userAgent = "wx";
		}
		if (ua.match(/AlipayClient/i) == 'alipayclient') {
			this.userAgent = "alipay";
		}
		// #endif
		
		// #ifdef APP
		this.userAgent = "app";
		// #endif
		
		//获取当前访问的设备------------------------------------------------------------
		
		
	},
	methods: {
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//选择支付方式
		changePayType(type) {
			this.payType = type;
		},
		
		//获取用户信息
		async getUserinfo() {
			const param_userinfo = {
				token: this.token
			};
			await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.userInfo = res.data.data;
					}
				}
			});
		},
		//获取支付信息
		async getpayinfo() {
			const param = {
				token: this.token
			};
			await this.$http.request('Order', 'paytype', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.payInfo = res.data.data;
					}
				}
			});
		},
		//获取订单信息
		getOrderInfo() {
			const param = {
				token: this.token,
				id: this.orderid
			};
			
			let _this = this;
			this.timer = setInterval(() => {
				this.$http.request('Order', 'orderdetail', 'GET', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.orderInfo = res.data.data;
							this.orderno = res.data.data.orderno;
							this.submitshow = true;
							this.submitshow1 = true;

							if (res.data.data.paystatus != 0) {
								uni.navigateTo({
									url: '/pages/order/paySuccess',
									success: function(res) {
										clearInterval(_this.timer);
										_this.timer = null;
									}
								});
							}
							
						}
					}
				});
			}, 1000);
		},
		
		//打开支付
		qrR(res) {
			//console.log("图片地址："+res);
			this.src = res;
			this.payshow = 'show';
		},
		
		//关闭支付
		payclose(){
			this.payshow = '';
		},
		
		//确认支付
		confirm: async function() {
			var that = this;
			
			/* 数据验证模块*/
			if (!this.orderInfo.actualprice || this.orderInfo.actualprice <= 0) {
				this.$helper.toast('订单金额错误', '', '/static/toast/fail-circle.png');
				return;
			}
			
			if (this.payType == 2) { //余额支付
				clearInterval(this.timer);
				this.timer = null;
						
				const param = {};
				param.token = this.token;
				param.orderid = this.orderid;
				await this.$http.request('Order', 'moneypay', 'POST', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.$helper.toast('支付成功', 'sucess');
							uni.navigateTo({
								url: `/pages/order/paySuccess`
							});
						}
					}
				});
				
			} else if (this.payType == 10) { //三方银行卡  汇付
				let orderid = this.orderid;
				if (orderid && orderid != undefined) {
					uni.navigateTo({
						url: `/pages/order/payBankHuifu?orderid=${orderid}`
					});
				}
				
			} else if (this.payType == 11) { //三方支付宝  汇付
				
				const param = {};
				param.token = this.token;
				param.orderno = this.orderno;
				param.payType = this.payType;
				await this.$http.request('Bspay', 'ali_pay', 'POST', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							
							// alipay_qr
							let qrcode_url = res.data.data.expend.qrcode_url;
							// #ifdef H5
							window.location.href = qrcode_url;
							// #endif
							
							// #ifdef APP-PLUS
							console.log("APP支付宝支付");
							plus.runtime.openURL(qrcode_url, function(res) {
								console.log(qrcode_url);
							});
							// #endif

						}
					}
				});
				
			} else if (this.payType == 12) { //三方微信  汇付
				
				if(this.ismicromessenger == 0){
					this.$helper.toast('请微信扫码支付', '', '/static/toast/fail-circle.png');
					return;
				}
				
				let weixin_url  = "https://gyl.h5.lvaijiankang.com/#/pages/qrcodepay/index?orderno=" + this.orderno;
				
				// #ifdef H5
				window.location.href= weixin_url;
				// #endif
				// #ifdef APP-PLUS
				console.log("APP微信支付");
				plus.runtime.openURL(weixin_url, function(res) {
					console.log(weixin_url);
				});
				// #endif
				
			} else {
				clearInterval(this.timer);
				this.timer = null;
				
				this.$helper.toast('选择支付方式', '', '/static/toast/fail-circle.png');
				return;
			}
		},
		
		
		//确认支付 生成二维码
		confirm1: async function() {
			var that = this;
			
			/* 数据验证模块*/
			if (!this.orderInfo.actualprice || this.orderInfo.actualprice <= 0) {
				this.$helper.toast('订单金额错误', '', '/static/toast/fail-circle.png');
				return;
			}
			
			if (this.payType == 11) { //三方支付宝
				this.paytext = "浏览器或支付宝 扫一扫支付";
				
				this.val = "https://gyl.h5.lvaijiankang.com/#/pages/qrcodepay/index?orderno=" + this.orderno + "&payType=11";
				this.$refs.qrcode2._makeCode();
				
			}else if (this.payType == 12) { //三方微信
				this.paytext = "微信扫一扫支付";
				
				this.val = "https://gyl.h5.lvaijiankang.com/#/pages/qrcodepay/index?orderno=" + this.orderno + "&payType=12";
				this.$refs.qrcode2._makeCode();
				
			} else {
				clearInterval(this.timer);
				this.timer = null;
				
				this.$helper.toast('该支付方式，无法生成二维');
				return;
			}
		}
		
	}
};
</script>

<style lang="scss">
.app {
	width: 100%;
}

.price-box {
	background-color: #fff;
	height: 180upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 28upx;
	color: #909399;

	.price {
		font-size: 50upx;
		color: #303133;
		margin-top: 12upx;
	}
}

.pay-type-list {
	background-color: #fff;

	.type-item {
		height: 120upx;
		padding: 20upx 0upx 20upx 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}

	.icon {
		width: 80upx;
		font-size: 52upx;
	}
	.icon-erjiye-yucunkuan {
		color: #fe8e2e;
	}
	.icon-weixinzhifu {
		color: #36cb59;
	}
	.icon-alipay {
		color: #01aaef;
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.pay-text {
	padding: 0 60upx;
	height: 100upx;
	line-height: 100upx;
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
}
.dikou-type{
	padding-top: 20upx;
	padding-left: 60upx;
	font-size: 30upx;
	color: #ff0000;
}
.mix-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 630upx;
	height: 80upx;
	margin: 30upx auto 30upx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.mix-btn1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 630upx;
	height: 80upx;
	margin: 60upx auto 30upx;
	font-size: $font-lg;
	color: #fff;
	background-color: #01aaef;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}


.qrcodecontent{
	background-color: #f8f8f8;
	padding-top: 30upx;
	padding-bottom: 50upx;
	
	.qrcodetext{
		font-size:40upx;
	}
	
	.qrcode2{
		margin-top: 20upx;
	}
	
	.qrcodeclose{
		margin-top: 20upx;
		color: #ff0000;
	}
	
	
}
	
</style>